﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>蓉记鲜鲜鲜微贺卡</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" href="~/Themes/RongJi/Style/greetingcard/css/app.css">
    <link rel="stylesheet" href="~/Themes/RongJi/Style/greetingcard/js/joyride-2.1.css">
</head>

<body>
    <body>
        <div class="cardBody cardIndex">
            <div class="audioPlayer">
                <a href="~/Themes/RongJi/Style/greetingcard/audio/0.mp3" title="" class="sm2_button"></a>
            </div>
            <div class="diyTool">
                <button id="goBack" onclick="history.go(-1)">发送</button>
            </div>
            <div class="scroll">
                <div class="headerImg"><img src="~/Themes/RongJi/Style/greetingcard/css/cardIndex.jpg" alt="2015"></div>
                <ul>
                    <li class="so-awesome"><a href="/Purchase/ChooseGreetingCard?cardId=card1&orderNumber=@Request.QueryString["OrderNumber"]"><img src="~/Themes/RongJi/Style/greetingcard/css/card1.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card2&orderNumber=@Request.QueryString["OrderNumber"]"><img src="~/Themes/RongJi/Style/greetingcard/css/card2.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card3&orderNumber=@Request.QueryString["OrderNumber"]"><img src="~/Themes/RongJi/Style/greetingcard/css/card3.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card4&orderNumber=@Request.QueryString["OrderNumber"]"><img src="~/Themes/RongJi/Style/greetingcard/css/card4.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card5&orderNumber=@Request.QueryString["OrderNumber"]"><img src="~/Themes/RongJi/Style/greetingcard/css/card5.jpg" alt=""></a></li>
                    <li><a href="/Purchase/ChooseGreetingCard?cardId=card6&orderNumber=@Request.QueryString["OrderNumber"]"><img src="~/Themes/RongJi/Style/greetingcard/css/card6.jpg" alt=""></a></li>
                </ul>
            </div>
        </div>
        <ol id="joyRideTipContent">
            <li data-class="so-awesome" data-text="关闭">
                <h2>选择贺卡样式</h2>
                <p>恭喜您支付成功，请点击选择您喜爱的贺卡样式送给好友</p>
            </li>
        </ol>
        <script type="text/javascript" src="~/Themes/RongJi/Style/greetingcard/js/jquery.min.js"></script>
        <script type="text/javascript" src="~/Themes/RongJi/Style/greetingcard/js/soundmanager2-jsmin.js"></script>
        <script type="text/javascript" src="~/Themes/RongJi/Style/greetingcard/js/jquery.joyride-2.1.js"></script>
        <script type="text/javascript" src="~/Themes/RongJi/Style/greetingcard/js/mp3-player-button.js"></script>
        <script>
            var requestAnimationFrame = window.requestAnimationFrame ||
                                      window.webkitRequestAnimationFrame ||
                                      window.mozRequestAnimationFrame ||
                                      function (func) { setTimeout(func, 17); };

            var html = document.documentElement;

            function Snowflake(maxX) {
                this.reset(maxX);
            }
            Snowflake.prototype.tick = function () {
                var sidePhase = this.sidePhase += this.sideVel;
                this.y += this.vel;
                this.x += this.sideVel;
            };
            Snowflake.prototype.reset = function (maxX) {
                var rand = Math.random();
                var chanceOfLargeSnowflake = 0.15;

                this.size = 2 + Math.random() * 5;
                this.vel = 3 + Math.random() * 3;
                this.alpha = 0.5 + Math.random() * 0.8;

                // random x position
                this.x = Math.random() * maxX;
                this.y = -this.size;

                // side-to-side movement
                this.sideVel = (0.5 - Math.random()) * this.vel;


                return this;
            };

            (function () {
                var canvas = document.createElement('canvas');
                var context = canvas.getContext('2d');
                var settleCanvas = document.createElement('canvas');
                var settleContext = context && settleCanvas.getContext('2d');
                var canvasStyle = canvas.style;
                var settleCanvasStyle = settleCanvas.style;
                var windowResized;
                var activeFlakes = [];
                var snowflakesPerPixelPerSecond = 0.05;
                var PIx2 = Math.PI * 2;
                var assumedFps = 60;
                var settlePoint;
                var snowflakePool = [];

                function resizeCanvas() {
                    settlePoint = Array(html.clientWidth);
                    settleCanvas.width = canvas.width = html.clientWidth;
                    settleCanvas.height = canvas.height = html.clientHeight;
                }

                function updateSettlePoints(flake) {
                    var size = flake.size * 0.8; // reduce coral effect
                    var xStart = Math.floor(flake.x - size);
                    var range = size * 2;
                    var newY;

                    if (xStart < 0) {
                        range += xStart;
                        xStart = 0;
                    }
                    if (xStart + range > settlePoint.length) {
                        range -= xStart + range - settlePoint.length;
                    }

                    for (var i = 0; i < range; i++) {
                        newY = flake.y - (size * Math.cos((i / range) * Math.PI - (Math.PI / 2)));
                        settlePoint[i + xStart] = Math.min(settlePoint[i + xStart] || Infinity, newY);
                    }
                }

                var flakesToCreate = 0;
                function frame() {
                    flakesToCreate += (snowflakesPerPixelPerSecond / assumedFps) * canvas.width;
                    var flakesThisFrame = Math.floor(flakesToCreate);
                    flakesToCreate -= flakesThisFrame;

                    // clear canvas
                    if (windowResized) {
                        resizeCanvas();
                        windowResized = false;
                    }
                    else {
                        context.clearRect(0, 0, canvas.width, canvas.height);
                    }

                    // add new flake?
                    while (flakesThisFrame--) {
                        if (snowflakePool.length) {
                            activeFlakes.push(snowflakePool.pop().reset(canvas.width));
                        }
                        else {
                            activeFlakes.push(new Snowflake(canvas.width));
                        }
                    }

                    var i = activeFlakes.length;
                    var flake;

                    // for each flake...
                    while (i--) {
                        flake = activeFlakes[i];
                        flake.tick();

                        // splice flake if it's now out of rendering zone
                        if (flake.y >= canvas.height || flake.y >= settlePoint[Math.floor(flake.x)]) {
                            snowflakePool.push.apply(snowflakePool, activeFlakes.splice(i, 1));
                            // this flake effects our settle points
                            if (flake.alpha > 0.8) {
                                updateSettlePoints(flake);
                            }
                            settleContext.fillStyle = 'rgba(255, 255, 255, ' + flake.alpha + ')';
                            settleContext.beginPath();
                            settleContext.arc(flake.x, flake.y, flake.size, 0, PIx2, true);
                            settleContext.closePath();
                            settleContext.fill();
                            continue;
                        }

                        // render to canvas
                        context.fillStyle = 'rgba(255, 255, 255, ' + flake.alpha + ')';
                        context.beginPath();
                        context.arc(flake.x, flake.y, flake.size, 0, PIx2, true);
                        context.closePath();
                        context.fill();
                    }
                    requestAnimationFrame(frame);
                }

                if (context) {
                    resizeCanvas();

                    // style the canvas
                    canvasStyle.position = 'fixed';
                    canvasStyle.top = 0;
                    canvasStyle.left = 0;
                    canvasStyle.zIndex = 20;
                    canvasStyle['pointerEvents'] = 'none';

                    settleCanvasStyle.cssText = canvasStyle.cssText;

                    // watch out for resizes
                    window.addEventListener('resize', function () {
                        windowResized = true;
                    }, false);

                    // add it to the page & start animating
                    document.body.appendChild(canvas);
                    document.body.appendChild(settleCanvas);
                    requestAnimationFrame(frame);
                }
            })();

            $(window).load(function () {
                $('#joyRideTipContent').joyride({
                    autoStart: true,
                    postStepCallback: function (index, tip) {
                        if (index == 2) {
                            $(this).joyride('set_li', false, 1);
                        }
                    },
                    modal: true,
                    expose: true
                });
            });
        </script>
    </body>
</html>